<template>
    <div>
        <el-table :data="contentList" border style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange" center v-loading="loading">
            <el-table-column type="selection" fixed :width="tableAction('width', 'checkbox')" v-if="contentList.length"></el-table-column>
            <template v-for="(item,index) in titleList">
                <!-- 特殊处理 需要显示icon -->
                <el-table-column v-if="tableAction('special', index) === 'icon'" :key="index" :label="item" :width="tableAction('width', index)">
                    <template slot-scope="scope">
                        <i :class="tableAction('icon', index)"></i>
                        <span style="margin-left: 10px">{{ scope.row.created_at }}</span>
                    </template>
                </el-table-column>
                <!-- 特殊处理 需要显示switch标签 -->
                <el-table-column v-else-if="tableAction('special', index) === 'switch'" :key="index" :label="item" :width="tableAction('width', index)">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.status" @click.native="changeStatus(scope.row.status, scope.row)"></el-switch>
                    </template>
                </el-table-column>
                <!-- 特殊处理 需要对显示的数据进行处理 -->
                <el-table-column v-else-if="tableAction('special', index) === 'word'" :key="index" :label="item" :width="tableAction('width', index)">
                    <template slot-scope="scope">
                        <div slot="reference" class="name-wrapper">
                            <el-tag size="medium">{{ tableAction('word', index, scope.row[index]) }}</el-tag>
                        </div>
                    </template>
                </el-table-column>
                <!-- 特殊处理 显示图片 -->
                <el-table-column v-else-if="tableAction('special', index) === 'image'" :key="index" :label="item" :width="tableAction('width', index)">
                    <template slot-scope="scope">
                        <div slot="reference" class="mid-image">
                            <img :src="tableAction('image', index, scope.row[index])" v-if="scope.row[index]">
                        </div>
                    </template>
                </el-table-column>
                <!-- 其他 -->
                <el-table-column v-else :key="index" :prop="index" :label="tableAction('word',index, item)" :sortable="tableAction('sort',index)" :width="tableAction('width', index)">
                </el-table-column>
            </template>
            <el-table-column label="操作" fixed="right" :width="tableAction('width', 'func')" v-if="contentList.length">
                <template slot-scope="scope">
                    <el-button size="small"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="small" type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
    import {getConfig} from 'common/configFunc'

    export default {
        props: {
		  titleList: {
		    type: Object,
		    default: () => {
		    	return {};
		    }
		  },
		  contentList: {
		    type: Array,
		    default: () => {
		    	return [];
		    }
		  },
		  loading: {
		  	type: Boolean,
		  	default: false
		  }
		},
		data() {
			return {
				checkList: [],
			}
		},
		methods: {
            tableAction(type,index,value=''){
                return getConfig(type, index, value);
            },
            changeStatus(status, row){
            	this.$emit('tableAction', 'changeStatus', row);
            },
            handleEdit(index, row){
            	this.$emit('tableAction', 'edit', row);
            },
            handleDelete(index,row){
            	this.$emit('tableAction', 'delete', row);
            },
            handleSelectionChange(val) {
                this.$emit('tableAction', 'checkbox', val);
            }
        }
    }
</script>
<style scope>
.el-table .cell{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
}
.mid-image {
    text-align: center;
}
.mid-image img{
    width: 35px;
    height: 35px;
    vertical-align: middle;
}
</style>